// 配置路由
import {createRouter, createWebHashHistory} from "vue-router";

// 1. 引入路由组件
import GoodsInfo from "@/views/GoodsInfo.vue";
import Index from "@/views/Index.vue";
import UserInfo from "@/views/UserInfo.vue";
import Role from "@/views/Role.vue";
import Header from "@/views/Header.vue";
import Footer from '@/views/Footer.vue'
// 2. 定义路由 path component
const routes = [
	// {path: '/', component: Index},
	{
		path: '/',
		components:
			{
				Header: Header, // 将组件 Header 放到 name='Header' 的位置 缩写成 Header
				default: Index, // 将组件 Index 放到 name为空 的位置
				Footer: Footer // 缩写成 Footer 将组件 Footer 放到 name='Footer' 的位置
			}
	},
	{
		path: "/login",
		name: 'login',
		component: () => import('@/views/Login.vue')
	},
	{
		path: "/goodsInfo",
		component: GoodsInfo,
		// 配置子路由
		children: [
			{
				// 动态参数从 : 开始 后面的id 相当于给动态参数的名字 未来通过 params.参数名 可以获取传递的值
				// /goodsInfo/goods/1
				path: 'goods/:id',
				name: 'goods',
				// 延迟加载，当路由被使用时才会加载组件
				component: () => import('@/views/Goods.vue')
			}
		]
	},
	{
		path: '/userInfo',
		component: UserInfo
	},
	{
		path: '/role',
		component: Role
	},

]
// 3. 创建路由实例
const router = createRouter({
	routes: routes, // routes
	history: createWebHashHistory()
})

// 配置全局路由守卫
router.beforeEach((to, from) => {
	console.log("to==>", to)
	console.log("from==>", from)
	// TODO 用户是否登录
	let user = sessionStorage.getItem("user");
	console.log("user ==> " + user)
	if (to.path !== '/login' && !user) {
		// 访问的不是登录页面 并且没有登录
		return {
			name: 'login'
		}
	}
})
// 4. 默认导出 实例
export default router